<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" type="text/css" href="../../css/demo.css" />
    
    <title>Jslet - DBBetweenEdit</title>
    <script type="text/javascript" data-main="../../config.js" src="../../lib/requirejs/require.min.js"></script>
    <script type="text/javascript">
	    require(['dbcontrol/form/e-dbbetweenedit']);
    </script>
</head>
<body>
    <div class="demo-header">
    <h4 id="top">Jslet - DBBetweenEdit</h4>
	</div>
	<hr />

	<div data-jslet="type: 'DBTable', dataset: 'btwdataset'" style="margin-bottom: 10px"></div>
	
	<div class="container-fluid">
	<div class="form-horizontal">
	
	<div class="form-group form-group-sm">
	<div class="col-sm-2">
		<label>1、字符型</label>
	</div>
	<div class="col-sm-4">
		<div data-jslet='type:"DBBetweenEdit", dataset:"btwdataset", field:"name"'></div>
	</div>
	<div class="col-sm-2">
		<label>2、数字型</label>
	</div>
	<div class="col-sm-4">
		<div data-jslet='type:"DBBetweenEdit", dataset:"btwdataset", field:"salary"'></div>
	</div>
	</div>
	
	<div class="form-group form-group-sm">
	<div class="col-sm-2">
		<label>3、日期型</label>
	</div>
	<div class="col-sm-4">
		<div data-jslet='type:"DBBetweenEdit", dataset:"btwdataset", field:"birthday"'></div>
	</div>
	
	<div class="col-sm-2">
		<label>4、带查找数据的字段</label>
	</div>
	<div class="col-sm-4">
		<div data-jslet='type:"DBBetweenEdit", dataset:"btwdataset", field:"department"'></div>
	</div>
	</div>

	<div class="form-group form-group-sm" style="height: 150px">
	<p>
		<label>5、在DBEditPanel控件中显示</label>
	</p>
	<div class="col-sm-12">
		<div data-jslet='type:"DBEditPanel", dataset:"btwdataset", columnCount: 2, labelCols: 2' style="padding: 5px"></div>
	</div>

	</div>
	</div>
	
	
	<hr />
	<h4>源码</h4>
	<h5>HTML</h5>
    <pre class="prettyprint linenums"><code>
    //1、基础类型
    &lt;div data-jslet='type:"DBBetweenEdit", dataset:"btwdataset", field:"name"'>&lt;/div>
    
    //2、在DBEditPanel控件中显示
    &lt;div data-jslet='type:"DBEditPanel", dataset:"btwdataset", columnCount: 2, labelCols: 2' style="border: 1px solid #777; padding: 5px">&lt;/div>
	</code></pre>
    
	<h5>JavaScript</h5>
    <pre class="prettyprint linenums"><code>
    //创建“部门”数据集
    var dsDept = new jslet.data.Dataset(datasetMetaStore.getDatasetMeta('department'));
    
	//创建测试数据集
	var dsCfg = {name: "btwdataset", fields: [
	    {name: 'action', dataType: 'E'},
		{name: 'name', dataType: 'S', length: 10, label: 'Name', valueStyle: jslet.data.FieldValueStyle.BETWEEN},//between style
		{name: 'birthday', dataType: 'D', length: 10, displayWidth: 15, label: 'Birthday', valueStyle: jslet.data.FieldValueStyle.BETWEEN},
		{name: 'salary', dataType: 'N', length: 12, scale: 2, displayFormat: '#,##0.00', label: 'Salary', valueStyle: jslet.data.FieldValueStyle.BETWEEN},
		{name: 'department', dataType: 'S', length: 12, label: 'Department', lookup: { dataset: 'department'}, valueStyle: jslet.data.FieldValueStyle.BETWEEN},
	]};
	dsBetween = new jslet.data.Dataset(dsCfg);
	dsBetween.appendRecord();
	
	jslet.ui.install();
	</code></pre>

    <script type="text/javascript">
       window.LOADER_BASE_URL = "../../lib/prettify";
    </script>
    <script type="text/javascript" src="../../lib/prettify/run_prettify.js"></script>
		
</body>
</html>
